<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-space :size="12">
          <a-button type="primary" v-auth="permissionCodeMap.shareAdd" @click="operateUser(operateActionTypeMap.ADD)"
            >新增</a-button
          >
          <a-button type="primary" v-auth="permissionCodeMap.shareExport" :loading="exportLoading" @click="dataExport"
            >导出</a-button
          >
        </a-space>
      </template>

      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'userCount'">
          <span class="global-primary-text" style="cursor: default">
            {{ record.userCount }}
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'status'">
          <span class="global-active-status" v-if="record.status == 1"> 启用 </span>
          <span class="global-stop-status" v-else-if="record.status == 0"> 停用 </span>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            v-auth="permissionCodeMap.shareView"
            class="g-operate-btn"
            @click="operateUser(operateActionTypeMap.VIEW, record)"
            >查看</a-button
          >
          <a-button
            type="link"
            class="g-operate-btn"
            v-auth="permissionCodeMap.shareEdit"
            @click="operateUser(operateActionTypeMap.EDIT, record)"
            >编辑</a-button
          >
          <a-button
            type="link"
            v-auth="permissionCodeMap.shareStatus"
            class="g-operate-btn"
            @click="operateStatus(record)"
          >
            {{ record.status == 0 ? '启用' : '停用' }}
          </a-button>
        </template>
      </template>
    </BasicTable>
    <ShareAdd @register="shareAddRegister" @operateSuccess="operateSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, watch, onMounted } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getShareBasicColumns, getSearchFormConfig } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import { useModal } from '@/components/Modal'
import ShareAdd from './components/ShareAdd.vue'
import { userStore } from '@/store/modules/user'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { downExcel } from '@/utils/axios/request'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { UserRecord } from '@/types/system'
import { message } from 'ant-design-vue'
import api from '@/api'
const { shareList, shareSwitchStatus } = api

const userModule = userStore()

const operateActionTypeMap = operateActionType

const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: shareList,
  columns: getShareBasicColumns(),
  useSearchForm: true,
  formConfig: getSearchFormConfig(),
  showIndexColumn: true,
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

const [shareAddRegister, { openDrawer: ShareAddOpenDrawer, setDrawerProps }] = useDrawer()

const exportLoading = ref(false)

const operateUser = (type: OperateType, record?: any) => {
  setDrawerProps({
    title: operateTxtType[type],
    showOkBtn: type === operateActionTypeMap.VIEW ? false : true,
    cancelText: type === operateActionTypeMap.VIEW ? '关闭' : '取消'
  })
  ShareAddOpenDrawer(true, {
    type,
    record
  })
}

const operateSuccess = () => {
  setPagination({
    current: 1
  })
  reload()
}
// 状态调整
const operateStatus = async (record: any) => {
  await shareSwitchStatus({
    id: record.id,
    phone: record.phone,
    status: record.status == 1 ? 0 : 1
  })
  let contentInfo = record.status == 1 ? '停用' : '启用'
  message.success(`${contentInfo}成功`)
  reload()
}

// 数据导出
const dataExport = async () => {
  const { getFieldsValue } = getForm()
  const formData = getFieldsValue()
  exportLoading.value = true
  try {
    let res = await downExcel(
      '/api/tenant/manager/user/activityExport',
      {
        ...formData
      },
      '分享邀请数据'
    )
    exportLoading.value = false
    message.success('导出成功')
  } catch (error) {
    exportLoading.value = false
  }
}
</script>

<style lang="less" scoped></style>
